<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    1、插值语法：主要对标签体内容中的数据进行操作
    2、指令语法：主要对标签进行操作 {标签属性，标签内容....}
-->

<div class="container">
    <h1>插值语法</h1>
    <p>hello,{{name}}</p>
    <hr/>
    <h1>指令语法</h1>
<!--    指令语法的一种用法  -->
    <a v-bind:href="url">去尚硅谷学习1</a>
<!--    上一种指令语法的简写-->
    <a :href="url">去尚硅谷学习2</a>
</div>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;
    new Vue({
        el: '.container',
        data: {
            name: 'vue',
            url:'http://www.atguigu.com'
        }
    });
</script>
</body>
</html>